<template>
	<view class="container">
		<view class="login">
			<view class="login_img"></view>
			<view class="login_text" v-show="phone != ''">{{ phone }}</view>
			<view class="login_text" v-show="phone == ''">请绑定手机号关联账户</view>
			<view class="login_buttom" @tap="bdphone">{{phone==''?"绑定手机号":'修改手机号'}}</view>
		</view>
		<view class="to_vip" @tap="topayvip">
			<image class="to_vipimg" src="https://dysx-h5.shjiuliwl.com/Eblock/images/vipicon.png"></image>
			<view class="to_viptext">开通会员</view>
			<view class="to_viptextwo">查看会员特权</view>
			<image class="to_vipimgtwo" src="https://dysx-h5.shjiuliwl.com/Eblock/images/right.png"></image>
		</view>	
		<view class="my_package">
			<view class="my_package_tit">
				<image class="my_package_tit_img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/教程.png"></image>
				<view class="my_package_tit_text">我的套餐</view>
			</view>
			<!-- 企业套餐 -->
			<view class="EnterprisePackage">
				<view class="EnterprisePackage_item">
					<view class="Package_name">
						<span v-show="vipvalue.is_open_auto_reply==1" style="color: rgba(255, 87, 51, 1);"> 已开通 </span>
						<span v-show="vipvalue.is_open_auto_reply==0"> 未开通 </span> | 
						<span v-show="vipvalue.is_deploy_auto_reply==1" style="color: rgba(255, 87, 51, 1);"> 已配置 </span>
						<span v-show="vipvalue.is_deploy_auto_reply==0"> 未配置 </span>
					</view>
					<view class="Package_js">抖音企业号自动回复</view>
				</view>
				<view class="hr"></view>
				<view class="EnterprisePackage_item">
					<view class="Package_name">
						<span v-show="vipvalue.is_open_pinwheel==1" style="color: rgba(255, 87, 51, 1);"> 已开通 </span>
						<span v-show="vipvalue.is_open_pinwheel==0"> 未开通 </span> | 
						<span v-show="vipvalue.is_deploy_pinwheel==1" style="color: rgba(255, 87, 51, 1);"> 已配置 </span>
						<span v-show="vipvalue.is_deploy_pinwheel==0"> 未配置 </span>
					</view>
					<view class="Package_js">抖音小风车跳微信</view>
				</view>
			</view>
			<view class="cardnum">
				<view class="cardnum_item">
					<view class="item_cardnum">{{vipvalue.card_total_count}}张</view>
					<view class="item_name">卡片总数</view>
				</view>
				<view class="cardnum_item">
					<view class="item_cardnum">{{vipvalue.card_count}}张</view>
					<view class="item_name">剩余数</view>
				</view>
				<view class="cardnum_item">
					<view class="item_cardnum">{{ vipvalue.end_time==null?'无':vipvalue.end_time }}</view>
					<view class="item_name">有效期</view>
				</view>
			</view>
		</view>
		<view class="usecard" @tap="tovideo">
			<image class="usecard_img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/蓝book.png"></image>
			<view class="usecard_text">如何使用抖音卡片</view>
			<image class="usecard_imgtwo" src="https://dysx-h5.shjiuliwl.com/Eblock/images/right.png"></image>
		</view>
		<view class="sales">
			<view class="sales_item" v-for="(item,index) in AfterSales" :key="index" @tap="topage(item.page)">
				<image class="sales_item_img" :src="item.icom"></image>
				<view class="sales_item_text">{{ item.name }}</view>
				<image class="sales_item_imgtwo" src="https://dysx-h5.shjiuliwl.com/Eblock/images/right.png"></image>
			</view>
		</view>
		<uni-popup ref="popup" background-color="rgba(0, 0, 0,0.4)" :mask-click="false" :safe-area="false">
			<view class="popupcenter">
				<view class="title">绑定/修改登录手机号</view>
				<input class="imputphone" v-model="inputphone" placeholder="请填写手机号关联会员账号"/>
				<view class="buttoms">
					<view class="closephone" @tap="close">取消</view>
					<view class="surephone" @tap="qdphone">确认</view>
				</view>
			</view> 
		</uni-popup>
	</view>
</template>

<script>
import { onGotApiData } from '../../utils/api.js';
	export default {
		data() {
			return {
				AfterSales:[{
						icom:'https://dysx-h5.shjiuliwl.com/Eblock/images/蓝jilu.png',
						page:'/pages/orderManagement/orderManagement',
						name:'订单管理',
					},
					{
						icom:'https://dysx-h5.shjiuliwl.com/Eblock/images/蓝erji.png',
						page:'/pages/Service/Service',
						name:'联系客服',
					},
					{
						icom:'https://dysx-h5.shjiuliwl.com/Eblock/images/蓝gt.png',
						page:'/pages/About/About',
						name:'关于我们',
					}
				],
				phone:'', //展示的手机号
				userId:'', 	//userid
				inputphone:null, // 输入的手机号
				vipvalue:{}, //个人会员返回的信息
				
			}
		},
		onLoad(options) {
			// 获取首页基础信息
			this.phone = uni.getStorageSync('dysx_phone')||''
			this.userId = uni.getStorageSync('dysx_userId')||''

		},
		onShow(){
			// 查询会员信息
			this.getuservip()
		},
		// 页面初次渲染完成时执行的代码
		onReady() {

		},
		// 页面卸载时触发
		onUnload() {

		},
		// 页面隐藏时触发
		onHide() {
			this.close()
		},
		methods: {

			// 绑定手机号
			bdphone(){
				this.$refs.popup.open('center')
			},
			// 取消弹框
			close(){
				this.$refs.popup.close()
			},
					// 点击手机号绑定
			qdphone(){
				// 对手机号进行校验
				const phoneRegex = /^1[3456789]\d{9}$/;
				if(!phoneRegex.test(this.inputphone)){
					return uni.showToast({
							title: '请输入正确手机号',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
				}
				let params = {
					phone:this.inputphone,
					user_id:this.userId,
				}
				onGotApiData('/wxxcx_api/mine/v1/phone_binding','POST',params,this.bdphone_value)
			},
			bdphone_value(result){
				console.log('绑定手机号',result)
				if(result.code == 200){
					this.close()
					this.phone = this.inputphone
					uni.setStorageSync('dysx_phone',this.phone)
					// 查询会员信息
					this.getuservip()
					return uni.showToast({
							title: '已绑定手机号',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
				}else if(result.code == 0){
					this.close()
					this.phone = this.inputphone
					uni.setStorageSync('dysx_phone',this.phone)
					// 查询会员信息
					this.getuservip()
					return uni.showToast({
							title: '手机号修改成功',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
				}
			},
			// 查询会员信息
			getuservip(){
				let params = {
					user_id:this.userId,
				}
				onGotApiData('/wxxcx_api/mine/v1/user_vip','GET',params,this.uservip_value)
			},
			// 会员信息结果
			uservip_value(result){
				console.log('result',result)
				if(result.code == 200){
					this.vipvalue = result.data
					uni.setStorageSync('dysx_phone',result.data.phone)
				}
			},
			// 跳转到会员页面
			topayvip(){
				uni.navigateTo({
					url: '/pages/payvip/payvip'
				});
			},
			// 跳转到视频示例
			tovideo() {
				uni.navigateTo({
					url: '/pages/exampleVideo/exampleVideo'
				});	
			},
			// 跳转到其他子页面
			topage(page){
				uni.navigateTo({
					url: page,
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		padding: 0rpx 0;
		overflow: auto;
		font-family: '思源黑体';
		background: linear-gradient(180deg, rgba(115, 149, 250, 1) 0%, rgba(68, 114, 252, 1) 75.7%, rgba(115, 149, 250, 0) 100%)no-repeat;
		background-size: 100% 30%;
		.login{	
			width: 750rpx;
			height: 120rpx;
			display: flex;
			// border: 1px solid black;
			.login_img{
				width: 450rpx;
				height: 120rpx;
				background: url('https://dysx-h5.shjiuliwl.com/Eblock/images/信息绑定卡片.png');
				background-size: 100% 100%;
			}
			.login_text{
				width: 360rpx;
				height: 60rpx;
				// border: 1px solid black;
				margin: 10rpx 0 0 -260rpx;
				font-size: 32rpx;
				line-height:60rpx;
				color: rgba(255, 255, 255, 1);
			}
			.login_buttom{
				width: 180rpx;
				height: 66rpx;
				background-color: rgba(255, 255, 255, 1);
				margin: 16rpx 0 0 0;
				border-radius: 60rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: -4px 5px 8px  rgba(0, 0, 0, 0.25);
				font-size: 28rpx;
				line-height: 66rpx;
				color: rgba(13, 73, 255, 0.7);
				text-align: center;
			}
		}
		.to_vip{
			width: 720rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			border-radius: 8rpx;
			background: linear-gradient(90deg, rgba(209, 187, 148, 1) 40.97%, rgba(240, 228, 205, 1) 100%);
			box-shadow: 0px 2px 4px  rgba(212, 48, 48, 0.25);
			display: flex;
			.to_vipimg{
				width: 100rpx;
				height: 100rpx;
				margin: 10rpx 0 0 25rpx;
				// border: 1px solid black;
			}
			.to_viptext{
				width: 200rpx;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 38rpx;
				font-weight: 700;
				color: rgba(102, 78, 58, 1);
				margin-left: 10rpx;
			}
			.to_viptextwo{
				width: 330rpx;
				height: 120rpx;
				font-size: 30rpx;
				line-height: 120rpx;
				color: rgba(166, 109, 12, 1);
				text-align: right;
			}
			.to_vipimgtwo{
				width: 42rpx;
				height: 42rpx;
				margin: 40rpx 0 0 0;
			}
		}
		.my_package{
			width: 730rpx;
			height: 350rpx;
			border-radius: 10px;
			margin: 0 auto;	
			margin-top: -30rpx;		
			background: rgba(255, 255, 255, 1);
			.my_package_tit{
				width: 680rpx;
				height: 100rpx;
				margin: 0 auto;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				display: flex;
				.my_package_tit_img{
					width: 52rpx;
					height: 52rpx;
					margin: 24rpx 0;
				}
				.my_package_tit_text{
					width: 500rpx;
					height: 100rpx;
					font-size: 34rpx;
					font-weight: 700;
					line-height: 100rpx;
					margin-left: 10rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
			.EnterprisePackage{
				width: 730rpx;
				height: 120rpx;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				display: flex;
				.EnterprisePackage_item{
					width: 365rpx;
					height: 120rpx;
					.Package_name{
						width: 365rpx;
						height: 60rpx;
						font-size: 28rpx;
						line-height: 70rpx;
						// border: 1px solid black;
						color: rgba(56, 56, 56, 1);
						text-align: center;
					}
					.Package_js{
						width: 365rpx;
						height: 60rpx;
						font-size: 24rpx;
						line-height: 50rpx;
						color: rgba(128, 128, 128, 1);
						text-align: center;
					}
				}
				.hr{
					width: 10rpx;
					height: 90rpx;
					margin-top: 15rpx;
					border-right: 1rpx solid rgba(242, 242, 242, 1);
				}
			}	
			.cardnum{
				width: 730rpx;
				height: 120rpx;
				display: flex;
				.cardnum_item{
					flex: 1; /* 设置每个块元素的 flex-grow 为 1，即均等分配剩余空间 */
					// border: 1px solid black;
					text-align: center; /* 文字居中显示样式，可根据实际需求修改 */
					.item_cardnum{
						font-size: 28rpx;
						line-height: 70rpx;
						color: rgba(0, 0, 0, 1);
						white-space: nowrap; /* 不换行 */
						overflow: hidden; /* 超出部分隐藏 */
						text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
					}
					.item_name{
						font-size: 24rpx;
						line-height: 40rpx;
						color: rgba(128, 128, 128, 1);
					}
				}
			}

		}
		.usecard{
			width: 730rpx;
			height: 110rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			.usecard_img{
				width: 56rpx;
				height: 44rpx;
				margin: 34rpx 16rpx 0 34rpx;
			}
			.usecard_text{
				width: 540rpx;
				height: 110rpx;
				font-size: 34rpx;
				line-height: 106rpx;
				color: rgba(56, 56, 56, 1);
			}
			.usecard_imgtwo{
				width: 42rpx;
				height: 42rpx;
				margin: 30rpx;
			}
		}
		.sales{
			width: 730rpx;
			height: 300rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			background: rgba(255, 255, 255, 1);
			.sales_item{
				width: 730rpx;
				height: 100rpx;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				display: flex;
				.sales_item_img{
					width: 44rpx;
					height: 44rpx;
					margin: 28rpx 0 0 34rpx;
				}
				.sales_item_text{
					width: 600rpx;
					height: 100rpx;
					font-size: 32rpx;
					line-height: 100rpx;
					margin-left: 26rpx;
					color: rgba(56, 56, 56, 1);
				}
				.sales_item_imgtwo{
					width: 40rpx;
					height: 40rpx;
					margin: 30rpx;
				}
			}
		}
		// 绑定手机号的弹框
		.popupcenter{
			width: 710rpx;
			height: 400rpx;
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			.title{
				width: 710rpx;
				height: 70rpx;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 70rpx;
				padding-top: 30rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
			.imputphone{
				width: 600rpx;
				padding:0 20rpx;
				height: 90rpx;
				margin: 0 auto;
				margin-top: 50rpx;
				margin-bottom: 50rpx;
				border-radius: 10rpx;
				background-color: rgba(229, 229, 229, 1);
			}
			.buttoms{
				width: 500rpx;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 60rpx;
				text-align: center;
				.closephone{
					width: 200rpx;
					height: 60rpx;
					border-radius: 10rpx;
					background: rgba(229, 229, 229, 1);
					color: rgba(56, 56, 56, 1);
				}
				.surephone{
					width: 200rpx;
					height: 60rpx;
					border-radius: 10rpx;
					background: rgba(0, 111, 237, 1);
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
</style>
